<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<!-- <script type="text/javascript"> -->
<script type="text/babel">
  // 创建虚拟DOM  jsx
  //   const h1 = <h1>靠你青蛙🐸 疼不疼 强</h1>;
  // 渲染  -》 把虚拟DOM变成真实DOM        范围盒模型
  //   ReactDOM.render(h1, document.querySelector("#root"));

  // 项目常用细节1：  属性使用模型数据   vue  :属性名="data中的键"    react  属性名={data模型数据}  切记不能加引号
  // 项目常用细节2：  jsx中解析数组/对象  vue  都是原样显示      react  数组挨个展示/对象报错  切记切记切记 后期实战数组中99% 是一个个jsx
  const data1 = 11;
  const data2 = [1, 2, 3];
  const data21 = ["<b>1</b>", "<b>2</b>", "<b>3</b>"];
  const data22 = [<b key="1">1</b>, <b key="2">2</b>, <b key="3">3</b>];
  const data3 = { a: 1, b: 2 };

  const ul = (
    <ul>
      <li>你好/hello/靠你青蛙/哦你好色要/傻瓜低卡</li>
      <li>1111</li>
      <li>1111</li>
      <li>1111</li>
      <li>1111</li>
      <li>1111-{data1}</li>
      <li>1111-{data1 ? "好强" : "不强"}</li>
      <li a={data1}>看属性</li>
      <li>{data2}</li>
      {/*  <li>{data3}</li> 不支持解析对象 */}
      <li>
        {data21}
        {data22}
      </li>
    </ul>
  );
  ReactDOM.render(ul, document.querySelector("#root"));
</script>
